<div id="root">
    <div class="settings">
        <div class="content">
            <ui-tab :value="indexTab" @confirm="onClickTab">
                <ui-button class="" style="border-right: 1px solid gray;">属性绑定</ui-button>
                <ui-button class="" style="border-right: 1px solid gray;">组件创建</ui-button>
                <ui-button class="" :style="{color:getPropertyModify()?'yellow':''} + '; border-right: 1px solid gray;'" :tooltip="getPropertyModify()?'当前配置未保存':''" >
                    {{strTabSettingTitle}}
                    <!-- <ui-label v-if="bPropertyModify" :value="strTabSettingTitle">
                    </ui-label> -->
                    <!-- <div> -->
                        <!-- <p :class="css_property_titleTips" :style="{color:getPropertyModify()?'yellow':''}">{{strTabSettingTitle}}</p> -->
                    <!-- </div> -->
                </ui-button>
            </ui-tab>
            
            <div v-if="indexTab==0" class="wrap">
                <div>
                    <p :class="css_titleTips" style="margin-left:5px; margin-right: 10px;">{{titleTips}}</p>
                </div>
                <div v-if="propertyInfos.length==0" style="background-color: #262626;">
                    <div style="margin: 0px 5px;">
                        <ui-markdown>
                            {{content}}
                        </ui-markdown>
                    </div>
                </div>
                
                <div>
                    <div v-if="propertyInfos.length>0">
                        <div class="section-line"></div>
                        <ui-prop>
                            <ui-label slot="label" class="prop-setting" tooltip="锁定后点击场景中的其它节点不会更新当前界面属性" >锁定属性显示</ui-label>
                            <div slot="content" class="prop-row">
                                <ui-checkbox slot="content" :checked="bCheckLocked" @change="onCheckLocked"></ui-checkbox>
                                <ui-label class="prop-setting">锁定后选中其它节点时不会更新本界面</ui-label>
                                <span class="flex-1"></span>
                            </div>
                        </ui-prop>
                        
                        <ui-prop>
                            <ui-label slot="label" class="prop-setting">显示属性类型</ui-label>
                            <div slot="content" class="prop-row">
                                <ui-checkbox :checked="bShowCType" @change="onCheckShowCType"></ui-checkbox>
                                <ui-label class="prop-setting">在属性绑定列表显示属性的组件类型</ui-label>
                                <span class="flex-1"></span>
                            </div>
                        </ui-prop>
                        <div class="config-content-line"></div>
                        <!-- <div class="section-line"></div> -->
                    </div>
                    
                    <!-- <template v-for="info in propertyInfos" :key="info.uuid"> -->
                        <ui-section v-for="info in propertyInfos" expand="" :key="info.uuid">
                            <div slot="header" :class="info.css_head_text">
                                <ui-label tabindex="-1" class="ml-10" :tooltip="info.tooltip">{{info.name}}</ui-label>
                                <ui-label v-if="info.warning" tabindex="-1" class="ml-5" :tooltip="info.tooltip">*</ui-label>
                            </div>
                            <ui-prop v-if="true" class="">
                                <div slot="label" class="row">
                                    <ui-label tabindex="-1" class="ml-10" tooltip="点击右侧按钮可将节点树属性同步到脚本中">Script</ui-label>
                                </div>
                                <div slot="content" class="prop_content">
                                    <ui-asset :value="info.uuid" class="flex-1" readonly="true" droppable="cc.Script" tabindex="-1"></ui-asset>
        
                                    <ui-button class="transparent" tooltip="点击按钮可将节点树属性同步到脚本中" tabindex="-1" @confirm="updateMVCScripts(info)">
                                        <ui-icon :class="" value="refresh"></ui-icon>
                                    </ui-button>
                                </div>
                            </ui-prop>

                            <!-- <div class="section-line"></div> -->

                            <ui-section expand="" header="属性绑定">
                            <div class="view flex-1">
                                <!-- <div class="view">
                                    <ui-button v-if="items.length<=0" @confirm="onAdd">{{txtOK}}</ui-button>
                                    <ui-button v-if="items.length>0" @confirm="onRemove">{{txtCancel}}</ui-button>
                                    <ui-checkbox v-if="items.length>0" v-bind:checked="isShowPath" v-on:change="onShowPath">显示节点路径</ui-checkbox>
                                    
                                    <div v-if="items.length<=0" style="background-color: #262626;">
                                        <ui-markdown :value="content">
                                        </ui-markdown>
                                    </div>
                                </div> -->

                                <div v-if="info.items.length==0 && info.arrayItems.length==0">
                                    <p class="text_warning" style="margin-left:5px; margin-right: 10px;">当前未找到可识别的属性。<br> 请检查 '插件设置' 页面是否使用 $ 或 _ 符号前缀，或者是否配置了相关的组件前缀。</p>
                                </div>
                        
                                <div v-if="info.items.length>0">
                                    <!-- <template v-for="(item, index) in info.items" :key="index"> -->
                                    <div v-for="(item, index) in info.items" :key="index">
                                        <span v-if="isShowPath">{{item.tooltip}}</span>
                                        <ui-prop class="">
                                            <div slot="label" class="prop-label-content">
                                                <div :class="item.css_row_item_text">
                                                    <ui-label :value="item.property" tabindex="-1" :tooltip="item.tooltip" readonly="true"></ui-label>
                                                </div>
                                                <div v-if="bShowCType" :class="item.css_row_item_ctype">
                                                    <ui-label class="ml-10" :value="item.parent" tabindex="-1" :tooltip="item.tooltip" readonly="true"></ui-label>
                                                </div>
                                            </div>
                                            <ui-node class="row_item" slot="content" readonly="true" :value="item.uuid" class="flex-1" type="cc.Node" typename="Node" tabindex="-1">
                                            </ui-node>
                                        </ui-prop>
                                    </div>
                                    <!-- </template> -->
                                </div>
                        
                                <div v-if="info.arrayItems.length>0">
                                    <div v-for="array in info.arrayItems" :key="array.name" style="margin-bottom: 5px;">
                                        <ui-section class="config" >
                                            <div slot="header" :class="array.css_array_text">
                                                <ui-label tabindex="-1" class="ml-10">{{getArrayTitle(array)}}</ui-label>
                                            </div>
                                            <div class="child">
                                                <!-- <template v-for="(item, index) in array.items" :key="item.uuid"> -->
                                                    <ui-prop class="" v-for="(item, index) in array.items" :key="item.uuid">
                                                        <div slot="label" :class="item.css_row_item_text">
                                                            <ui-label tabindex="-1" :tooltip="item.tooltip" readonly="true">[{{index}}] {{item.suffix}}</ui-label>
                                                        </div>
                                                        <ui-node class="row_item" slot="content" readonly="true" :value="item.uuid" class="flex-1" type="cc.Node" typename="Node" tabindex="-1" empty="">
                                                        </ui-node>
                                                    </ui-prop>
                                                <!-- </template> -->
                                            </div>
                                        </ui-section>
                                    </div>
                                </div>
                            </div>
                            </ui-section>
                        </ui-section>
                    <!-- </template> -->
                </div>
            </div>

            <div v-if="indexTab==1" class="wrap" style="margin: 0px 5px;">
                <!-- <ui-section expand="" header="组件创建"> -->
                    <ui-prop>
                        <ui-label slot="label" tabindex="-1" tooltip="模型脚本模板路径" >模板路径</ui-label>
                        <ui-input slot="content" tabindex="0" :value="moduleTemplate" readonly="true"></ui-input>
                    </ui-prop>

                    <ui-prop>
                        <ui-label slot="label" tabindex="-1" tooltip="模型脚本保存路径" >保存路径</ui-label>
                        <ui-file ref="folder" slot="content" type="directory" placeholder="选择模型脚本保存路径" :value="moduleFolder" @change="onFolderName"></ui-file>
                    </ui-prop>
                    <ui-prop name="ModuleName">
                        <ui-label slot="label" tabindex="-1" tooltip="模型名称" >生成名称</ui-label>
                        <ui-input slot="content" placeholder="输入模型名称（默认Default）" :value="moduleName" @change="onModuleName"></ui-input>
                    </ui-prop>

                    <div class="section-line"></div>
<!--                 
                    <ui-prop>
                        <div slot="label" class="script_label">
                            <ui-label tabindex="-1" tooltip="模型管理类" readonly="true">Manager</ui-label>
                            <span class="flex-1"></span>
                            <ui-checkbox slot="content" :checked="bCreateManager" @change="onCheckManager"></ui-checkbox>
                        </div>
                        <div class="script_content" slot="content">
                            <ui-asset class="flex-1" readonly="true" :value="uuidManager" droppable="cc.Script" tabindex="-1">
                            </ui-asset>
                        </div>
                    </ui-prop>
                    <ui-input readonly="true" placeholder="自动生成模型管理类" :value="moduleManager"></ui-input>
                    <div class="section-line"></div> -->

                    <ui-prop>
                        <div slot="label" class="script_label">
                            <ui-label slot="label" tabindex="-1" readonly="true">控制组件</ui-label>
                            <span class="flex-1"></span>
                            <!-- <ui-checkbox slot="content" :checked="bCreateController" @change="onCheckController"></ui-checkbox> -->
                        </div>
                        <div class="script_content" slot="content">
                            <ui-asset class="flex-1" readonly="true" :value="uuidController" droppable="cc.Script" tabindex="-1">
                            </ui-asset>
                        </div>
                    </ui-prop>
                    <ui-input readonly="true" placeholder="自动生成控制组件" :value="moduleController"></ui-input>
                    <div class="section-line"></div>

                    <ui-prop>
                        <div slot="label" class="script_label">
                            <ui-label slot="label" tabindex="-1" readonly="true">视图组件</ui-label>
                            <span class="flex-1"></span>
                            <!-- <ui-checkbox slot="content" :checked="bCreateViewUI" @change="onCheckViewUI"></ui-checkbox> -->
                        </div>
                        <div class="script_content" slot="content">
                            <ui-asset class="flex-1" readonly="true" :value="uuidViewUI" droppable="cc.Script" tabindex="-1">
                            </ui-asset>
                        </div>
                    </ui-prop>
                    <ui-input readonly="true" placeholder="自动生成视图组件" :value="moduleViewUI"></ui-input>
                    <div class="section-line"></div>

                    <ui-prop>
                        <div slot="label" class="script_label">
                            <ui-label slot="label" tabindex="-1" readonly="true">模型定义</ui-label>
                            <span class="flex-1"></span>
                            <!-- <ui-checkbox slot="content" :checked="bCreateViewModel" @change="onCheckViewModel"></ui-checkbox> -->
                        </div>
                        <div class="script_content" slot="content">
                            <ui-asset class="flex-1" readonly="true" :value="uuidViewModel" droppable="cc.Script" tabindex="-1">
                            </ui-asset>
                        </div>
                    </ui-prop>
                    <ui-input readonly="true" placeholder="自动生成模型定义类" :value="moduleViewModel"></ui-input>
                    <div class="section-line"></div>

                    <ui-prop>
                        <!-- <ui-label slot="label" tabindex="-1" tooltip="是否场景(场景类继承SceneBase,面板类继承ViewBase)" >是否场景</ui-label> -->
                        <div slot="content" class="prop-row">
                            <!-- <ui-checkbox slot="content" :checked="isScene" @change="onCheckScene"></ui-checkbox> -->
                            <span class="flex-1"></span>
                            <!-- <ui-button :readonly="isExist" :class="isExist?'color_grey':''" @confirm="createMVCScripts">创建脚本</ui-button> -->
                            <ui-button :class="isExist?'color_grey':''" @confirm="createMVCScripts">创建脚本</ui-button>
                        </div>
                    </ui-prop>
                    <!-- <div class="section-line"></div> -->
                <!-- </ui-section> -->
                <div v-if="listTips.length>0">
                    <template v-for="(item, index) in listTips">
                        <p class="text_error" style="margin-left:5px; margin-right: 20px; word-wrap:break-word;">({{index+1}}){{item}}</p>
                    </template>
                </div>
            </div>

            <div v-if="indexTab==2" class="wrap">
                <div>
                    <p class="" style="margin-left:5px; margin-right: 10px;">当前版本：{{version}}</p>
                </div>

                <ui-section expand="" header="属性识别规则">
                    <ui-prop>
                        <ui-label slot="label" class="prop-setting">使用 $ 或 _ 标志属性</ui-label>
                        <div slot="content" class="prop-row">
                            <ui-checkbox slot="content" :checked="bUsePrefix" @change="onCheckUsePrefix"></ui-checkbox>
                            <ui-label v-if="!bUsePrefix" class="prop-setting">不使用符号标志时，只通过 "属性前缀配置" 中的 "节点前缀" 来识别属性</ui-label>
                            <span class="flex-1"></span>
                        </div>
                    </ui-prop>
                    <ui-prop>
                        <ui-label slot="label" class="prop-setting">使用 + 定义数组属性</ui-label>
                        <div slot="content" class="prop-row">
                            <ui-checkbox slot="content" checked readonly></ui-checkbox>
                            <ui-label class="prop-setting">(必选)</ui-label>
                            <span class="flex-1"></span>
                        </div>
                    </ui-prop>
                    <ui-prop>
                        <ui-label slot="label" class="prop-setting">使用 - 忽略子节点</ui-label>
                        <div slot="content" class="prop-row">
                            <ui-checkbox slot="content" checked readonly></ui-checkbox>
                            <ui-label class="prop-setting">(必选)</ui-label>
                            <span class="flex-1"></span>
                        </div>
                    </ui-prop>

                    <ui-prop>
                        <ui-label slot="label" class="prop-setting">自动过滤视图类子节点</ui-label>
                        <div slot="content" class="prop-row">
                            <ui-checkbox slot="content" :checked="bFilterViewNode" readonly></ui-checkbox>
                            <ui-label class="prop-setting">(必选) 当某属性节点也挂载了视图类组件时 (在'属性绑定'面板以黄色高亮显示该属性), 其子节点将被自动过滤</ui-label>
                            <span class="flex-1"></span>
                        </div>
                    </ui-prop>
                </ui-section>
                <!-- <div class="section-line"></div> -->

                <ui-section expand="" :class="css_property_titleTips" :header="getPropertyConfigTitle()">
                    <div v-for="(config, index) in getPropertyConfig()" class="text_default" :key="config.ctype">
                        <ui-prop name="">
                            <div slot="label" class="prop-label-content">
                                <ui-label :class="getPropertyConfigWarning(config)">节点类型</ui-label>

                                <ui-button v-if="!isPropertyNode(config)" class="prop-button" tooltip="删除此配置项" @confirm="delPropertyConfig($event, config, index)">
                                    <ui-icon class="prop-icon" value="del"></ui-icon>
                                </ui-button>
                            </div>
                            <div slot="content" class="prop-content">
                                <ui-input placeholder="选择组件类型" readonly :value="config.ctype">
                                </ui-input>
    
                                <ui-button :class="getPropertyBtnClass(config)" tooltip="选择组件类型" :readonly="isPropertyNode(config)" @confirm="selectPropertyConfig($event, config)">
                                    <ui-icon class="prop-icon" value="edit"></ui-icon>
                                </ui-button>
                            </div>                 
                        </ui-prop>
                        <ui-prop name="">
                            <ui-label slot="label" :class="getPropertyConfigWarning(config)">节点前缀</ui-label>
                            <div slot="content" class="prop-content">
                                <ui-input :ref="'inputPrefix'+index" slot="content" placeholder="多个前缀可用英文逗号分隔" :value="getPropertyConfigValue(config)" @change="editPropertyConfig($event, config, index)" @confirm="confirmInputProperty($event, config, index)"></ui-input>
                                
                                <ui-button class="prop-button" tooltip="重置为默认前缀" @confirm="resetPropertyConfig($event, config, index)">
                                    <ui-icon class="prop-icon" value="reset"></ui-icon>
                                </ui-button>
                            </div>
                        </ui-prop>
    
                        <div class="config-content-line"></div>
                    </div>

                    <ui-prop>
                        <ui-label v-if="bPropertyModify" slot="label" class="text_warning" >当前配置未保存</ui-label>
                        <div slot="content" class="prop-row">
                            <ui-button :class="" @confirm="restorePropertyConfig()">恢复默认</ui-button>
                            <span class="flex-1"></span>
                            <!-- <span style="width: 10px;"></span> -->
                            <ui-button :class="" @confirm="addPropertyConfig()">增加</ui-button>
                            <span style="width: 10px;"></span>
                            <ui-button :class="bPropertyModify?'yellow':''" @confirm="savePropertyConfig()">保存</ui-button>
                        </div>
                    </ui-prop>
                </ui-section>              
            </div>
        </div>
    </div>
</div>
